<template>
	<view class="barContent">
		<div ref="barChart" class="barDiv" style="width:100vw; height: 300px;"></div>
	</view>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		props: {
			tid: {
				type: Number,
				default: false,

			}
		},
		mounted() {
			this.getGraph()
		},
		methods: {
			initLineChart(ValData) {
				const chartDom = this.$refs.barChart;
				const myChart = echarts.init(chartDom);


				const option = {
					animation: false,
					title: {
						// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
						subtext: "人数（人）",
						left: 0, // 距离左边位置
						top: 16, // 距离上面位置
						subtextStyle: { // 设置二级标题的样式
							color: "#baf"
						},
					},
					xAxis: [{
						type: 'category',
						data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
						axisLabel: {
							fontSize: 9
						},
					}],
					yAxis: [{
						type: 'value',
						min: 0, // 设置 y 轴的最小值
						max: 20, // 设置 y 轴的最大值
						interval: 5, // 设置 y 轴的刻度间隔
					}],
					series: [{
							"name": "数据上椭圆",
							type: 'pictorialBar',
							symbolSize: [30, 10],
							symbolOffset: [0, -6],
							symbolPosition: 'end',
							z: 12,
							color: "#2DB1EF",
							data: ValData
						},
						{
							name: '下椭圆',
							type: 'pictorialBar',
							symbolSize: [30, 10],
							symbolOffset: [0, 0],
							z: 12,
							"color": "#19dfdd",
							"data": ValData
						},
						{
							type: 'bar',
							"barWidth": 30,
							barGap: '10%', // Make series be overlap
							barCateGoryGap: '10%',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
											offset: 0,
											color: "rgba(25,223,221,.7)"
										},
										{
											offset: 1,
											color: "rgba(25,223,221,.3)"
										}
									]),
								},
							},
							data: ValData
						},
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);


			},
			getGraph() {
				var that = this
				var data = {
					// id: 8,
					id: that.tid
				}
				that.$post('new_homework/teacher_homework_detail_chart', data).then(res => {
					// console.log('作业详情-作业报告-分数段分析', res.data.chart);

					if (res.code != 0) {
						var myObject = res.data.chart
						var keys = []
						var values = []
						keys = Object.keys(myObject);
						values = Object.values(myObject);
						// console.log('keys', keys)
						// console.log('values---', values)
						this.initLineChart(values);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		}
	};
</script>
<style scope>
	.barContent {
		margin-left: 30rpx;
	}

	.barDiv,
	.barDiv>div,
	.barDiv>div>canvas {
		width: 100% !important;
	}
</style>
